<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户信息管理系统--CRUD</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="./js/vue.js"></script>
    <script src="./js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <!--<div class="row col-md-4">
        <form >
            <span>用户名：</span><input type="text" class="form-control" id="searchname" v-model="searchname">
            <span>电话号码：</span><input type="text" class="form-control" id="searchphone" v-model="searchphone">
            <button type="button" class="btn btn-primary" @click="qingkong">搜索</button>
        </form>

    </div>-->
    <!--导航栏-->
    <nav class="navbar navbar-default">
        <div class="container-fluid">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">用户信息管理系统</span>

                </button>
                <a class="navbar-brand" href="#">用户信息管理系统</a>
            </div>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">欢迎：xxx同学</a></li>
            </ul>

        </div>
    </nav>
    <div class="row">
        <div class="col-lg-4" style="margin-left: 50px">
                <span>用户名</span>
                <input type="text" class="form-control"  id="searchname" v-model="searchname">
                <span>电话号码</span>
                <input type="text" class="form-control" id="searchphone" v-model="searchphone">
            <button type="button" class="btn btn-primary" @click="search()">搜索</button>
        </div>
    </div>

    <!--表格-->
    <div class="container-fluid" style="margin-top: 20px">
        <div class="row">
            <!--左表格-->
            <div class="col-md-8">
                <table class="table table-striped table-bordered table-hover">
                    <thead>
                    <tr>
                        <th>编号</th>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>工资</th>
                        <th>电话</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="user,index in users" :key="user.id">
                        <td>{{user.id}}</td>
                        <td>{{user.name}}</td>
                        <td>{{user.age}}</td>
                        <td>{{user.salary}}</td>
                        <td>{{user.phone}}</td>
                        <td><button class="btn btn-primary" @click="updateUser(user.id)">修改</button>&nbsp;&nbsp;<button class="btn btn-danger" @click="deleteUser(user.id)">删除</button></td>
                    </tr>

                    </tbody>
                </table>
            </div>
            <!--右侧表单-->
            <div class="col-md-4">
                <form method="post">
                    <div class="form-group">
                        <label for="name">用户名</label>
                        <input type="text" class="form-control" id="name" v-model="user.name" aria-describedby="emailHelp">
                    </div>
                    <div class="form-group">
                        <label for="age">年龄</label>
                        <input type="text" class="form-control" id="age"  v-model="user.age" aria-describedby="emailHelp">
                    </div>
                    <div class="form-group">
                        <label for="salary">工资</label>
                        <input type="text" class="form-control" id="salary"  v-model="user.salary" aria-describedby="emailHelp">
                    </div>
                    <div class="form-group">
                        <label for="phone">电话号码</label>
                        <input type="text" class="form-control" id="phone"  v-model="user.phone" aria-describedby="emailHelp">
                    </div>

                    <button type="button" class="btn btn-danger" @click="insertUser(user.id)">提交</button>
                    <button type="button" class="btn btn-primary" @click="qingkong">重置</button>
                </form>
            </div>
        </div>

    </div>
</div>
<script>
    const app = new Vue({
        el: "#app",
        data:{
            users:[],
            user:{},
            searchname:'',
            searchphone:''
        },
        methods:{
            findAll(){
                let _this = this;
                axios.get("http://localhost:8989/user/findAll").then(function(response){
                    if(response.data.status == true){
                        console.log("response.data.list:"+response.data.data)
                        _this.users = response.data.data;
                    }else{
                        alert("获取数据失败");
                    }
                })
            },
            insertUser(id){
                let _this = this;
                console.log("id:"+id)
                if(id != '' || id != null){
                    console.log("hello,world")
                    axios.post("http://localhost:8989/user/updateUser",this.user).then(function (res) {
                        if(res.data.status == true){
                            alert("修改成功");
                            _this.findAll();
                        }else{
                            alert("修改失败");
                        }
                    })
                }else {
                    axios.post("http://localhost:8989/user/insertUser", this.user).then(function (response) {
                        if (response.data.status == true) {
                            console.log("response.data.list:" + response.data.data)
                            alert("添加成功");
                            _this.findAll();
                            _this.qingkong();
                        } else {
                            alert("获取数据失败");
                        }
                    })
                }
            },
            qingkong(){
                this.user = {};
            },
            deleteUser(id){
                let _this = this;
                console.log("id:"+id)
                axios.get("http://localhost:8989/user/deleteUser?id="+id).then(function (response) {
                    if(response.data.status == true){
                        console.log("删除成功");
                        _this.findAll();
                    }
                })
            },
            updateUser(id){
                let _this = this;

                    axios.get("http://localhost:8989/user/findOne?id="+id).then(function (response) {
                        /*if(response.data.status == true){
                           _this.user = response.data;
                        }*/
                        _this.user = response.data;
                    })


            },
            search(){
                let _this = this;
                axios.get("http://localhost:8989/user/search?name="+this.searchname+"&phone="+this.searchphone).then(function (res) {
                    if(res.data.status == true){
                        alert("查询成功");
                        _this.users = res.data.data;
                        console.log("users:"+_this.users);
                        console.log("users.id:"+_this.users.id);
                        console.log("name:"+_this.users.name);
                        console.log("age:"+_this.users.age);
                        console.log("salary:"+_this.users.salary);
                        console.log("phone:"+_this.users.phone);
                    }else{
                        alert("查询失败");
                    }


                })
            }

        },
        created(){
            this.findAll()
        }
    })
</script>
</body>
</html>